<template>
  <div class="add-from-box">
    <div class="add-from-main">
      <Aside
        :aside="aside"
        scroll-target=".xgm-new-add-from-scrollbar"
        :aside-active.sync="asideActive"
      ></Aside>
      <div class="add-from_body">
        <scrollbar
          scrollbar-class="xgm-new-add-from-scrollbar"
          :listen-scroll="true"
          @scroll="scroll"
        >
          <div :ref="bodyRef" class="add-from_body_view">
            <slot></slot>
          </div>
        </scrollbar>
      </div>
    </div>
    <div class="from-footer">
      <div class="from-footer_body">
        <slot name="footer">
          <el-button type="primary" size="small">确定</el-button>
          <el-button size="small">取消</el-button>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
  import Aside from './Aside'
  import Scrollbar from '@/components/MyScrollbar'
  export default {
    components: {
      Aside,
      Scrollbar,
    },
    props: {
      aside: {
        // eslint-disable-next-line vue/require-valid-default-prop
        default: [],
        type: Array,
      },
      bodyRef: {
        type: String,
        default: 'add-from_body_view',
      },
    },
    data() {
      return {
        asideActive: 0,
      }
    },
    methods: {
      scroll({ scrollTop }) {
        this.asideActive = Array.from(
          this.$refs[this.bodyRef].childNodes
        ).findIndex((dom) => {
          // 当前板块滚动超出90%时，激活状态切换到下一个板块
          return dom.offsetTop + (dom.offsetHeight * 90) / 100 - scrollTop > 0
        })
        // this.asideActive = i == -1 ? this.aside.length - 1 : i;
      },
    },
  }
</script>

<style lang="scss" scoped>
  .add-from-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    height: calc(100vh - 64px);
    box-sizing: border-box;
    // @rightPadding: 74px;
    // @footerHeight: 64px;
    min-width: 1366px;
    .add-from-main {
      flex: 1;
      display: flex;
      overflow: hidden;
      max-width: 1660px;
      .add-from_body {
        flex: 1;
        height: 100%;
        min-width: 0;
        .add-from_body_view {
          padding: 0 74px 0px 20px;
          & > :nth-child(n + 2) {
            margin-top: 30px;
          }
          & > :first-child {
            padding-top: 20px;
          }
          & > :last-child {
            min-height: calc(100vh - 64px - 64px);
            box-sizing: border-box;
            padding-bottom: 30px;
          }
        }
      }
    }
    .from-footer {
      border-top: 1px solid #e5e9f2;
      height: 64px;
      box-sizing: border-box;
      .from-footer_body {
        height: 100%;
        padding-right: 74px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        box-sizing: border-box;
        max-width: 1660px;
        ::v-deep .el-button {
          width: 96px;
          font-size: 16px;
          font-weight: 500;
        }

        & > *:nth-child(n + 2) {
          margin-left: 30px;
        }
      }
    }
  }
</style>
